<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>充值列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../.././css/font.css">
    <link rel="stylesheet" href="../.././css/xadmin.css">
    <script src="../../layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="hashCode" placeholder="HASH值" autocomplete="off"
                                   class="layui-input"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="noPassReason" placeholder="不通过原因" autocomplete="off"
                                   class="layui-input"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <select name="status">
                                <option value="">状态</option>
                                <option value="1">待审核</option>
                                <option value="2">已通过</option>
                                <option value="3">已驳回</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="userId" placeholder="用户ID" autocomplete="off"
                                   class="layui-input"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table id="charge-list-table" lay-data="{id: 'chargeList'}" class="layui-table" lay-filter="charge-list"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="statusTpl">
    {{#  if(d.status == 1){ }}
    <button type="button" class="layui-btn layui-btn-xs" lay-event="pass">同意</button>
    <button type="button" class="layui-btn layui-btn-xs" lay-event="nopass">拒绝</button>
    {{#  } }}
</script>
</body>
<script>layui.use('laydate',
    function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });
</script>
<script>
    layui.use(['table','form'],
        function () {
            var tableIns = layui.table,
            form = layui.form;
            /**
             * 监听表格渲染
             */
            tableIns.render({
                elem: '#charge-list-table'
                ,height: 600
                ,url: '/api/charge/chargeList' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID',sort: true, fixed: 'left'}
                    ,{field: 'userId', title: '用户ID'}
                    ,{field: 'chargeNum', title: '充值数量'}
                    ,{field: 'hashCode', title: 'HASH值'}
                    ,{field: 'notPassReason', title: '不通过原因'}
                    ,{field: 'status',title:'状态',templet:function(data){
                            if(data.status == 1){
                                return '待审核'
                            }
                            if(data.status == 2){
                                return '审核通过'
                            }
                            if(data.status == 3){
                                return '审核驳回'
                            }
                        }}
                    ,{field: 'filePath', title: '凭据',templet:function (data) {
                            var url = data.filePath;
                            return '<a href="' + url + '" target="_blank " title="点击查看">' +
                                '<img src="' + url + '" style="height:400px;" />' +
                                '</a>';
                        }}
                    ,{field: 'createTime', title: '申请时间',templet:function(d){
                            return layui.util.toDateString(new Date(d.createTime).getTime(),'yyyy-MM-dd HH:mm:ss')
                        }}
                        , {field: 'status',  title: '审核',templet: '#statusTpl',minWidth: 170}
                  ]]
            });



            //工具栏触发点击事件
            tableIns.on('tool(charge-list)', function(obj){
                console.log("-----触发审核事件---")
                //查询详情
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === 'pass') {
                    layer.prompt({title: '输入Hash编码', formType: 2}, function(pass, index){
                        layer.close(index);
                        audit(data.id, 2,pass);
                        console.log("重载表格")
                        setTimeout(function () {
                            tableIns.reload('charge-list-table',{
                            })
                        },800)
                    });

                }
                if(layEvent == 'nopass') {
                    //询问框
                    layer.prompt({title: '不通过原因', formType: 2}, function(pass, index){
                        layer.close(index);
                        audit(data.id, 3,pass);
                        setTimeout(function () {
                            console.log("重载表格")
                            tableIns.reload('charge-list-table',{
                            })
                        },800)
                    });

                }
            });


            //触发行单击事件
            tableIns.on('row(charge-list)', function(obj){
                let filePath = obj.data.filePath;

                    layer.photos({
                        photos: '#layer-photos'
                        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });

            });

            /**
             * 监听表单提交
             */
            form.on('submit(search)',function(data) {
                var formData = data.field;
                var start = formData.start;
                var end = formData.end;
                var hashCode = formData.hashCode;
                var userId = formData.userId;
                var status = formData.status;
                var noPassReason = formData.noPassReason;
                //执行重载
                tableIns.reload('charge-list-table',{
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {//这里传参 向后台
                        start: start,
                        end: end,
                        hashCode:hashCode,
                        userId:userId,
                        status:status,
                        noPassReason:noPassReason
                    }
                });
                return false;//阻止表单跳转
            });
        });



    /**
     * 发起审核请求
     * @param data
     */
    function audit(id, status,vertifyContext) {
        $.ajax({
            url:"/api/charge/audit"
            ,method:'post'
            ,data:{
                id:id,
                status:status,
                vertifyContext:vertifyContext
            },
            success:function(data){
                if(data.code == "200"){
                    layer.msg("审核成功")
                }
                else{
                    layer.alert(data.message, {
                        icon: 2,
                        skin: 'layer-ext-demo' //见：扩展说明
                    })
                }
                return true;
            }

        })

    }
</script>
</html>